<template>
  <div class="equipment">
    <div class="function-container-back" v-on:click="backToPreviousPage">
      <img src="../../assets/images/house/return.png" alt="Return Icon" class="back-icon">
    </div>
    <div class="equipment-title">
        <h1>家居设备管理</h1>
    </div>
    <el-row gutter="20" class="equipment-hand">
      <el-form :label-position="labelPosition" label-width="80px" :model="equipmentFormData">
        <el-col :span="8">
          <el-form-item label="设备名称">
            <el-input v-model="equipmentFormData.deviceName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设备类型">
            <el-select v-model="equipmentFormData.deviceType" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-button icon="el-icon-search" circle v-on:click="getTableData"></el-button>
          <el-button type="warning" icon="el-icon-star-off" circle  v-on:click="reset"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle v-on:click="add"></el-button>
        </el-col>
      </el-form>

    </el-row>

    <div class="equipment-table">
      <el-table
          :data="tableData"
          style="width: 1400px"
          height="700px"
          border>
        <el-table-column
            prop="deviceName"
            label="设备名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deviceType"
            label="设备类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deviceDescription"
            label="设备详情"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="deviceStatus"
            label="设备状态"
            width="90"
        >
        </el-table-column>
        <el-table-column
            prop="energySavingMode"
            label="节能模式"
            width="90"
        >
        </el-table-column>
        <el-table-column
            prop="devicePower"
            label="设备功率"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="safetyStatus"
            label="安全情况"
            width="180"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="dialogDataForm" :model="dialogDataForm" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="选择家庭">
          <el-select v-model="equipmentFormData.familyId" placeholder="请选择">
            <el-option
                v-for="item in homeOptions"
                :key="item.id"
                :label="item.familyName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="dialogDataForm.deviceName" />
        </el-form-item>
        <el-form-item label="设备类型">


          <el-select v-model="dialogDataForm.deviceType" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备详情">
          <el-input v-model="dialogDataForm.deviceDescription" />
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="dialogDataForm.deviceStatus" placeholder="请选择">

              <el-option label="开启" value="0"></el-option>
              <el-option label="关闭" value="1"></el-option>
              <el-option label="待机" value="2"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="节能模式">
          <el-select v-model="dialogDataForm.energySavingMode" placeholder="请选择">

              <el-option label="开启" value="0"></el-option>
              <el-option label="关闭" value="1"></el-option>

          </el-select>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
          <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate" size="small">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

import api from "@/api/device";
import homeApi from "@/api/family";
export default {
  name: "equipment.vue",
  data(){
    return{
      dialogVisible:false,
      dialogDataForm:{},

      equipmentFormData:{

      },
      tableData: [],
      options:[
        {label:"厨房电器",value:"厨房电器"},
        {label:"客厅电器",value:"客厅电器"},
        {label:"卫生间电器",value:"卫生间电器"},
        {label:"卧室电器",value:"卧室电器"},
        {label:"洗衣间电器",value:"洗衣间电器"},
      ],
      homeOptions:[

      ]
    }
  },
  mounted() {
    this.getTableData()
    this.getFamily()
  },
  methods:{
    reset(){
      this.equipmentFormData={}
      this.getTableData()
    },
    getTableData(){
      api.getPageList(1,100,this.equipmentFormData).then((response)=>{
        if (response.code===200){
          console.log("eq",response)
          this.tableData=response.data.records

        }else {
          this.$message.error(response.message)
        }

      })
    },
    handleEdit(index,row){
      this.dialogVisible=true
      // console.log("index",index)
      // console.log("row",row)
      this.dialogDataForm=row
    },
    handleDelete(index,row){
      console.log("row",row)
      api.removeById(row.deviceId).then((re)=>{
        if (re.code===200){
          this.reset()

        }else {
          this.$message.error(re.message)
        }
      })
    },
    backToPreviousPage() {
      this.$router.go(-1); // 返回上一页
    },
    saveOrUpdate(){
      this.dialogDataForm.familyId=1
      console.log("this.dialogDataForm",this.dialogDataForm)
      api.save(this.dialogDataForm).then((response)=>{
        if (response.code===200){
          this.dialogDataForm={}
          this.reset()
        }
        this.dialogVisible=false
      })

    },
    add(){
      this.dialogVisible=true
      this.getFamily()
    },
    getFamily(){
      homeApi.getAll().then((re)=>{
        this.homeOptions=re.data
      })
    }
  }
}
</script>

<style scoped>
.equipment{

}

.equipment-hand{
  padding-top: 80px;
  padding-left: 275px;

  /deep/ .el-form-item__label{
    color: #ffffff;
  }

  /deep/ .el-input__inner{
    width: 410px;
  }
}

.equipment-table{
  margin: 0 auto;
  padding-left: 275px;
}

.equipment-container-back{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  font-size: 18px; /* Slightly larger font size */
  color: white;
  cursor: pointer;
  height: 28px;
}

.function-container-back{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  font-size: 18px; /* Slightly larger font size */
  color: white;
  cursor: pointer;
}

.equipment-title{
  position: absolute;
  top: 10px;
  left: 900px;
  color: white;
  height: 25px;
}
</style>
